import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import postcssPxToViewport from 'postcss-px-to-viewport'

// 修复版高度转换插件
const fixedHeightConverter = (options) => {
  return {
    postcssPlugin: 'postcss-fixed-height-converter',
    Declaration(decl) {
      // 只处理高度相关属性
      const heightProps = ['height', 'min-height', 'max-height']
      if (heightProps.includes(decl.prop)) {
        // 使用正则表达式提取数值（包括小数）
        const valueMatch = decl.value.match(/\d*\.?\d+/)
        if (valueMatch && valueMatch.input.slice(-2) !== 'vh' && valueMatch.input.slice(-1) !== '%') {
          const value = parseFloat(valueMatch[0])
          if (!isNaN(value)) {
            // 确保设计稿高度有效
            const designHeight = options.designHeight || 1080
            // 转换公式
            const vhValue = (value / designHeight) * 100

            // 保留原始单位（如!important）
            const unitMatch = decl.value.match(/[a-z%!]+$/)
            const unit = unitMatch ? unitMatch[0] : ''
            // 设置新值
            decl.value = `${vhValue.toFixed(4)}vh${unit.includes('!') ? ' !important' : ''}`
          }
        }
      }
    }
  }
}

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        // 处理宽度属性（转换为vw）
        postcssPxToViewport({
          viewportWidth: 1920, // 设计稿宽度
          unitToConvert: 'px',
          propList: ['*', '!height', '!min-height', '!max-height'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: [/node_modules/]
        }),
        // 处理高度属性（转换为vh）
        fixedHeightConverter({
          designHeight: 1080 // 设计稿高度
        })
      ]
    }
  }
})